<template>
    <el-dialog :title="$t('main.addKeyDialogTitle')" :visible.sync="addKeyDialogVisible" width="400px" :before-close="closeDialog">
        <div style="text-align: center;">
            <span>{{$t('addKey.type')}}：</span>
            <el-select v-model="type" :placeholder="$t('addKey.PleaseChoose')" size="small">
                <el-option v-for="item in options" :key="item.type" :label="item.type" :value="item.type"></el-option>
            </el-select>
        </div>
        <div class="dialog-bottom">
             <el-button type="primary" @click="addKey">{{$t('FormPlaceholder.OK')}}</el-button>
             <el-button @click="closeDialog">{{$t('FormPlaceholder.cancel')}}</el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    props:["addKeyDialogVisible","serverIdx"],
    data(){
        return {
            type:'',
            options:[
                {"type":"set","name":"set"},
                {"type":"list","name":"list"},
                {"type":"hash","name":"hash"},
                {"type":"string","name":"string"},
                {"type":"zset","name":"zset"}
            ]
        }
    },
    methods:{
        addKey(){
            if(this.type){
                this.$emit('addKeyCall',this.type)
                this.type=''
            }else{
                this.$message({
                    type:"warning",
                    message:this.$t('addKey.PleaseChooseTheType')
                })
            }
        },
        closeDialog(){
            this.$emit('close-dialogStatus')
        }
    }
}
</script>

<style scoped>
.dialog-bottom{
    text-align: center;
    margin-top: 15px;
}
</style>